﻿
<script src="~/res/assets/plugins/bootstrap-treeview-master/dist/bootstrap-treeview.min.js"></script>
<div id="demo">
    <div class="row">

        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <button type="button" class="btn waves-effect waves-light btn-info mx-sm-2" onclick="vm.OpenMode()"><i class="fa fa-plus"></i> 新增</button>
                    <p />
                    <div id="treeview1"></div>
                </div>
            </div>
        </div>

    </div>




    <div id="UserModal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form class="modal-content" novalidate>
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">分类信息</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div>
                    <div class="form-body">

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card-outline-info">

                                    <div class="card-body">

                                        <div class="form-body">
                                            <div class="row">
                                                <div class="form-inline  col-md-12">
                                                    <label class="form-Newlable">上级</label>
                                                    <div>
                                                        <input type="text" class="form-control" v-model="GridData.TBC_PARENT" hidden />
                                                        <input data-toggle="dropdown" type="text" class="form-control  custom-select" id="Tree" readonly v-model="GridData.TBC_PARENT_NAME" v-on:click="TreeClick" placeholder="为空添加根分类"/>
                                                        <ul id="DataTreeMenu" class="dropdown-menu col-9" role="menu" aria-labelledby="dLabel" style="border:none;width: 228px;" >
                                                            <li>
                                                                <div id="knowledgeTree" style="margin-top:-9px;margin-bottom:-9px;max-height: 340px;overflow-y: auto;"></div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row m-t-10">
                                                <div class="form-inline col-md-12">
                                                    <label class="form-Newlable">名称<span class="text-danger">*</span></label>
                                                    <input type="text" v-validate="'required'" name="名称" class="form-control" required v-model="GridData.TBC_NAME">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <span style="color:red;text-align:right" v-cloak class="col-md-9">{{ errors.first('名称') }}</span>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn waves-effect waves-light btn-primary btn-info" v-on:click="saveData">保存</button>
                    <button type="button" class="btn waves-effect waves-light btn-default btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div>
    </div>


</div>








<script type="text/javascript">
    Vue.use(VeeValidate);
    VeeValidate.Validator.localize('zh_CN');

    VeeValidate.Validator.localize({
        zh_CN: {
            messages: {
                required: function (name) { return name + "不能为空"; },
                email: function () { return "邮箱格式无效"; }
            }
        }
    });
    
    var vm = new Vue({
        el: "#demo",
        data: {
            UserList: [],
            GridData: {
                TBC_PARENT: "",
                TBC_PARENT_NAME: "",
                TBC_DID: "",
                TBC_NAME: ""
            }
        },
        mounted: function () {
            this.Query();

            $("ul.dropdown-menu").on("click", function (e) {
                e.stopPropagation();
            });
        },
        methods: {
            TreeClick: function () {
                $('#DataTreeMenu').slideDown();
            },
            Query: function () {

                $(".preloader").fadeIn();//加载等待
                var _self = this;
                _self.UserList = [];
                $.post("../Essential/Categories?act=data",
                    function (TreeData) {
                        TreeData = JSON.parse(TreeData);
                        TreeData = eval('([' + TreeData.data + '])');

                        $('#treeview1').treeview({
                            levels: 1,
                            selectedBackColor: "#03a9f3",
                            onhoverColor: "rgba(0, 0, 0, 0.05)",
                            expandIcon: 'ti-plus',
                            collapseIcon: 'ti-minus',
                            nodeIcon: 'fa fa-folder',
                            showTags: true,
                            showHtml: true,
                            data: TreeData
                        });

                        $('#knowledgeTree').treeview({
                            levels: 1,
                            selectedBackColor: "#03a9f3",
                            onhoverColor: "rgba(0, 0, 0, 0.05)",
                            expandIcon: 'ti-plus',
                            collapseIcon: 'ti-minus',
                            nodeIcon: 'fa fa-folder',
                            showTags: true,
                            showHtml: false,
                            data: TreeData,
                            onNodeSelected: function (event, data) {
                                vm.GridData.TBC_PARENT = data.id;
                                vm.GridData.TBC_PARENT_NAME = data.text;

                                $('#DataTreeMenu').slideUp();
                            }
                        });
                        $(".preloader").fadeOut();//取消加载等待
                    });
            },
            Delete: function (DID) {
                swal({
                    title: "确定要删除吗?",
                    text: "",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "是",
                    cancelButtonText: "否",
                    closeOnConfirm: false,
                    closeOnCancel: true
                }, function (isConfirm) {
                    if (isConfirm) {
                        $.post("../Essential/Categories", { act: 'delete', TBC_DID: DID },
                            function (data) {
                                data = JSON.parse(data);
                                if (data.status === 0) {
                                    swal("操作成功!", "", "success");
                                    vm.Query();
                                } else {
                                    swal("操作失败!", data.message);
                                }
                            });
                    }
                });
            },
            OpenMode: function (pid, pname, did, dname, nid) {

                if ($('#knowledgeTree').treeview('getSelected').length > 0) {
                    $('#knowledgeTree').treeview('toggleNodeSelected', [$('#knowledgeTree').treeview('getSelected')[0].nodeId, { silent: true }]);
                }

                if (pid != undefined) {
                    this.GridData = {
                        TBC_PARENT: pid,
                        TBC_PARENT_NAME: pname,
                        TBC_DID: did,
                        TBC_NAME: dname
                    }

                    if (nid == -1) {
                        var Snode = $('#knowledgeTree').treeview('getSelected');
                        if (Snode.length > 0) {
                            $('#knowledgeTree').treeview('toggleNodeSelected', [Snode[0].nodeId, { silent: false }]);
                        }
                    } else {
                        $('#knowledgeTree').treeview('selectNode', [nid, { silent: true }]);
                    }

                } else {
                    this.GridData = {
                        TBC_PARENT: "",
                        TBC_PARENT_NAME: "",
                        TBC_DID: "",
                        TBC_NAME: ""
                    }
                }

                $('#UserModal').modal('toggle');
            },
            saveData: function () {

                this.$validator.validateAll().then((result) => {
                    if (result) {
                        $.post("../Essential/Categories?act=save", this.GridData,
                            function (data) {
                                data = JSON.parse(data);
                                if (data.status === 0) {
                                    swal("操作成功!", "", "success");
                                    vm.Query();
                                    $('#UserModal').modal('toggle');
                                } else {
                                    swal("提示!", data.message);
                                }
                            });
                    }
                })
            }
        }
    });
</script>

